<template>
  <div class="qq_songs_recommend" id="content">
    <div class="qq_sonRec_inner">
      <div class="index__hd">
        <h2 class="index__tit"><i class="icon_txt">歌单推荐</i></h2>
      </div>
      <div class="qq_song_list_tab">
        <a class="list_tab__item">为你推荐</a><a class="list_tab__item">网络歌曲</a><a class="list_tab__item">KTV热歌</a
        ><a class="list_tab__item">经典</a><a class="list_tab__item">官方歌单</a><a class="list_tab__item">情歌</a>
      </div>
      <div class="qq_playlist mod_slide">
        <!-- 轮播组件 -->
        <div class="swiper-father">
          <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <ul class="playlist__list_ul">
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/UROl51JnIAk9Ipxmv4b86p2XypfBWg9b4Iye05cvocqqRGerh6nhyA/300?n=1"
                          />
                          <i class="mod_cover__mask"></i>
                          <i class="mod_cover__icon_play"></i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 「中国风纯音」倚栏听风，如梦如醉 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：297.4万</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="swiper-slide">
                <ul class="playlist__list_ul">
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/UROl51JnIAk9Ipxmv4b86p2XypfBWg9b4Iye05cvocqqRGerh6nhyA/300?n=1"
                          />
                          <i class="mod_cover__mask"></i>
                          <i class="mod_cover__icon_play"></i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 「中国风纯音」倚栏听风，如梦如醉 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：297.4万</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="swiper-slide">
                <ul class="playlist__list_ul">
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/UROl51JnIAk9Ipxmv4b86p2XypfBWg9b4Iye05cvocqqRGerh6nhyA/300?n=1"
                          />
                          <i class="mod_cover__mask"></i>
                          <i class="mod_cover__icon_play"></i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 「中国风纯音」倚栏听风，如梦如醉 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：297.4万</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                  <li class="playlist__item">
                    <div class="playlist__item_box">
                      <div class="playlist__cover mod_cover">
                        <a href="#">
                          <img
                            class="playlist__pic"
                            src="//qpic.y.qq.com/music_cover/Z7haT1p6eeic63oTvdlNb7xoHMYjBDlQict0ccSicdRpgLTicqoLHqtf9g/300?n=1"
                          />
                          <i class="mod_cover__mask"> </i>
                          <i class="mod_cover__icon_play"> </i>
                        </a>
                      </div>
                      <h4 class="playlist__title">
                        <span class="playlist__title_txt">
                          <a href="#"> 全民K歌翻唱热歌榜盘点 </a>
                        </span>
                      </h4>
                      <div class="playlist__other">播放量：3.9亿</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination" id="sw-pa"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" id="sw-bu-pr" ref="sw-bu-pr"></div>
          <div class="swiper-button-next" id="sw-bu-ne" ref="sw-bu-ne"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "SongRecommend",
};
</script>

<script lang="ts" setup>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { onMounted, ref } from "vue";
onMounted(() => {
  new Swiper("#swiper", {
    spaceBetween: 20,
    speed: 1000, //切换时间
    loop: true, //无缝轮播
    pagination: {
      //小圆点
      el: ".swiper-pagination", //选择到小圆点容器
      clickable: true, //在控制小圆点是否可以被点击
    },
    navigation: {
      //左右按钮
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  });
});
</script>

<style scoped>
/* 鼠标移入自动显示 */
.qq_songs_recommend:hover #sw-bu-pr {
  display: block;
  animation: pr 1s;
  left: -160px;
}
.qq_songs_recommend:hover #sw-bu-ne {
  display: block;
  animation: ne 1s;
  right: -160px;
}
/* 定义鼠标移入左右箭头的关键帧 */
@keyframes pr {
  0% {
    left: -300px;
  }
  100% {
    left: -160px;
  }
}
@keyframes ne {
  0% {
    right: -300px;
  }
  100% {
    right: -160px;
  }
}
/* 设置轮播图样式 对轮播图样式作二次修改 修改样式权重*/
#sw-pa {
  /* border: 1px solid red !important; */
  position: absolute;
  right: 50%;
  width: 60px;
  display: flex;
  justify-content: space-around;
  bottom: -120px;
}
#sw-pa .swiper-pagination-bullet {
  /* border: 1px solid green !important; */
  position: absolute !important;
}
/* #swiper {
   border: 1px solid red !important;
} */
.swiper-container {
  /* border: 1px solid red !important; */
  width: 1200px;
  /* height: 532px; */
}
.swiper-father {
  /* border: 1px solid green !important; */
  height: 224px;
  /* width: 1700px; */
  position: relative;
}
#sw-bu-pr,
#sw-bu-ne {
  position: absolute !important;
  /* border: 1px solid red; */
  display: inline-block;
  width: 100px;
  height: 133px;
  text-align: center;
  line-height: 133px;
  background-color: #e1e1e1;
  color: #000;
  top: 65.5px;
  z-index: 200;
}
#sw-bu-pr,
#sw-bu-ne {
  display: none;
}
#sw-bu-pr {
  left: -300px;
}
#sw-bu-ne {
  right: -300px;
}

/* 第二部分 歌单推荐 */

.qq_songs_recommend {
  height: 532px;
  background-color: #f7f7f7;
}
.qq_sonRec_inner {
  margin: 0 auto;
  width: 1200px;
}
.index__hd {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%;
}
.index__hd .index__tit {
  margin: 0 auto;
  width: 196px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
  /* background-image: url("./bac.png"); */
  background-image: -webkit-image-set(url("/src/assets/bac.png") 1x, url("/src/assets/bac.png") 2x);
}
.icon_txt {
  font-style: normal;
  font-weight: bold;
  font-size: 0;
}
.qq_song_list_tab {
  height: 50px;
  text-align: center;
}
.qq_song_list_tab a {
  height: 50px;
  text-align: center;
  margin: 0 24px;
  font-size: 15px;
  color: #333;
}
.qq_song_list_tab a:nth-child(1) {
  color: #31c27c;
}
/* 轮播图部分 */
.playlist__list_ul {
  display: flex;
}
.playlist__item {
  width: 244px;
  height: 310px;
  padding-right: 50px !important;
  box-sizing: border-box;
}
.playlist__item img {
  width: 224px;
  height: 224px;
  margin-bottom: 15px;
}
.playlist__title {
  width: 224px;
  height: 22px;
}
.playlist__title a {
  font-weight: 400;
  line-height: 22px;
  font-size: 14px;
  color: #000;
}
.playlist__other {
  width: 224px;
  height: 22px;
  font-size: 14px;
  color: #999;
}
</style>

<style>
/* 修改swiper底部小圆点样式 */
.swiper-pagination-bullet {
  background-color: #aeaeae;
}
</style>
